<template>
  <div class="box">
    <div class="top">
      <div class="top_item">
        <img :src="huohua" />
        <div>
          <countTo class="font_number" :startVal="0" :endVal="ZC" :duration="3000"></countTo>
          <p>正常墓穴</p>
        </div>
      </div>
      <div class="top_item">
        <img :src="huohua" />
        <div>
          <countTo class="font_number" :startVal="0" :endVal="DQ" :duration="3000"></countTo>
          <p>已到期未缴费</p>
        </div>
      </div>
    </div>
    <div class="mapChart" ref="mapChart"></div>
  </div>
</template>

<script>
import * as Api from "@/api/home";
import countTo from "vue-count-to";
import huohua from "@/assets/imgs/huohua.png";
import axios from 'axios'
export default {
  name: "homeLeftTop",
  components: {
    countTo,
  },
  data() {
    return {
      huohua,
      ZC: 0,
      DQ: 0,
      chart: null,
      color: ["#2FC0FF", "#FF9C5D"],
    };
  },
  mounted() {
    // 初始化
    this.initChart();
    this.getData()
    window.addEventListener("resize", this.screenAdapter);
  },
  methods: {
    async getData() {
      let { data } = await axios({
        method: 'post',
        url: `${this.baseUrl}?action=GetGuanLiFeiSum`
      })
      if (data._issuccess !== 1) return this.$message.error(data._msg)
      let { ZC, DQ } = data._data
      this.ZC = ZC
      this.DQ = DQ
      this.updateChart()
    },
    // 首页左上角柱状图
    initChart() {
      this.chart = this.$echarts.init(this.$refs.mapChart);
      let initOption = {
        color: this.color,
        tooltip: { trigger: "item", textStyle: { fontSize: '0.1rem', } },
        legend: { textStyle: { color: "#ffffff" }, show: false },

      };

      this.chart.setOption(initOption);
    },
    updateChart() {
      let arr = [
        { name: '正常墓穴', value: this.ZC },
        { name: '已到期未缴费', value: this.DQ },
      ]
      const dataOption = {

        title: [
          {
            text: Number(this.ZC) + Number(this.DQ),
            x: "center",
            y: "40%",
            textStyle: {
              fontSize: '0.35rem',
              fontWeight: "bolder",
              color: "#1DF9FC",
            },
          },
          {
            text: "墓穴已售总量",
            x: "center",
            y: "52%",
            textStyle: {
              fontSize: '0.2rem',
              color: "#1DF9FC",
            },
          },

        ],
        series: {
          type: 'pie', center: ["50%", "50%"], radius: ["40%", "70%"],
          showEmptyCircle: true,
          label: {
            fontSize: '0.18rem',
            // formatter:'{b}：{d}%', // 用来换行
            formatter: '{b}', // 用来换行
          },

          data: arr.map((item, index) => {
            return {
              label: {
                color: this.color[index],
              },
              ...item
            }
          }),
        }
      }
      this.chart.setOption(dataOption)
    },

    // 屏幕变化
    screenAdapter() {
      this.chart.resize();
    },
  },
  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  height: 5.075rem;
  padding: .25rem .25rem 0;
  box-sizing: border-box;
  background: url('../../assets/imgs/box-border.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .top {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top_item {
      display: flex;
      width: 3.325rem;
      height: 1.175rem;
      background: url('../../assets/imgs/box.png') no-repeat;
      background-size: 100% 100%;
      justify-content: center;
      align-items: center;
      font-weight: 600;

      img {
        margin-right: 0.25rem;
        width: .675rem;
        height: .625rem;
      }

      .font_number {
        font-size: 0.45rem;
        color: #ff9c5d;
      }

      p {
        margin-top: 0.125rem;

        span {
          cursor: pointer;
          color: #ff9c5d;
        }
      }
    }

  }

  .mapChart {
    //height: 2.6rem;
    flex: 1;
  }





}
</style>
